<template>
  <view class="payment-container">
    <view class="header">
      <view class="header-left">
        <view class="name">商户名称</view>
        <view class="laber">付款给商户</view>
      </view>
      <view class="header-right">
        <image :src="logo" />
      </view>
    </view>
    <!-- 金额显示区域 -->
    <view class="amount">
      <view class="amount-label">
        <text>付款金额</text>
      </view>
      <!-- 金额显示区域 -->
      <view class="amount-display">
        <label>￥</label>
        <!-- <input v-model="amount">{{ amount || "请输入金额" }}</input> -->
        <input type="number" v-model="amount" disabled="true" placeholder="请输入金额" />
      </view>
    </view>


    <!-- 数字键盘部分 -->
    <view class="keyboard-container">
      <view class="number-keyboard">
        <view class="key" @click="handleClick('1')">1</view>
        <view class="key" @click="handleClick('2')">2</view>
        <view class="key" @click="handleClick('3')">3</view>
        <view class="key" @click="handleClose">删除</view>
        <view class="key" @click="handleClick('4')">4</view>
        <view class="key" @click="handleClick('5')">5</view>
        <view class="key" @click="handleClick('6')">6</view>
        <view class="key key4 transfer-btn" @click="handleTransfer">转账</view>
        <view class="key" @click="handleClick('7')">7</view>
        <view class="key" @click="handleClick('8')">8</view>
        <view class="key" @click="handleClick('9')">9</view>
        <view class="key key2" @click="handleClick('0')">0</view>
        <view class="key" @click="handleClick('.')">.</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: '',  // 将默认值改为空字符串
      logo: '',
      decimal: 0,  // 小数点位数
    }
  },
  methods: {
    handleClick(e) {
      if (this.decimal >= 2) {
        return;
      }
      if (e === '.') {
        if (this.amount === '') {
          this.amount = '0.';  // 如果输入框为空，直接添加 '0.'
          return;
        } else if (this.amount.includes('.')) {// 如果输入框中没有小数点，添加小数点 
          return;
        }
      }
      if (this.amount.includes('.')) {
        this.decimal++;
      }
      this.amount += e;
    },
    handleClose() {
      if (this.amount !== '') {
        this.amount = this.amount.slice(0, -1)
        if (this.amount.includes('.')) {
          this.decimal--;
        }
        console.log('点击删除按钮', this.amount)
      }
    },
    handleTransfer() {

      console.log('点击转账按钮')
    }
  }
}
</script>

<style scoped lang="scss">
@import './payment.scss';
</style>